<!--
    * Time    : 2020-12-01 17:48:52
    * Author  : yinjing
    * Desc    : 退款商品列表
-->

<template>
    <div class="w750">
        <div :style="{ '--themescolor': themes.color }">
            <van-cell style="font-weight: 700; margin-bottom: 15px">
                <div style="margin-bottom: 10px">
                    <span>退货商品总数量：</span>
                    <span class="text-main">{{ totalSum }}件</span>
                </div>
                <div>
                    <span>退款商品总金额：</span>
                    <span class="text-main">￥{{ totalPrice }}</span>
                </div>
            </van-cell>

            <div class="content">
                <div class="chidrenBox" v-for="(item, index) in goodsList" :key="index">
                    <van-cell>
                        <div class="box">
                            <div class="pic">
                                <legend-image style="width: 100%; height: 100%" :pic="item.prodPic" :isJD="item.prodSource == 'JD'" />
                            </div>
                            <div class="text">
                                <div>{{ item.prodName }}</div>
                                <div class="text-999">{{ item.attribute }}</div>
                                <div class="con">
                                    <span class="text-main">￥{{ item.prodPrice }}</span>
                                    <span>x{{ item.maxBasketCount }}</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <span>退款金额</span>

                            <input
                                class="text-main ml-2"
                                style="background: #fff"
                                :disabled="!item.isUpdateAmount"
                                v-model.number="item.oneRefundAmount"
                                :placeholder="'最多可退' + item.refundAmount + '元'"
                            />
                        </div>
                        <div>
                            <span>退款数量</span>
                            <input
                                style="background: #fff"
                                v-model.number="item.basketCount"
                                :disabled="!item.isUpdateAmount"
                                class="text-main ml-2"
                                :placeholder="'最多可退' + item.maxBasketCount + '件'"
                            />
                        </div>

                        <!-- </van-form> -->
                    </van-cell>
                    <span style="font-size: 12px; padding-left: 15px">
                        最多可退数量：
                        <span class="font-weight">{{ item.maxBasketCount }}件</span>
                        最多可退
                        <span class="font-weight">￥{{ item.refundAmount }}</span>
                    </span>
                </div>
            </div>
            <!-- <van-button type="primary" @click="goback" class="but-main" block :disabled="disabled">确定</van-button> -->
            <footer class="but-main" @click="goback">确定</footer>
        </div>
    </div>
</template>

<script>
import legendImage from 'components/legendImage/legendImage'
import { mapState } from 'vuex'

export default {
    name: '',
    components: { legendImage },
    data() {
        return {
            goodsList: [], //商品列表

            disabled: true
        }
    },
    computed: {
        ...mapState(['themes']),
        totalPrice() {
            return this.goodsList.reduce((total, item) => total + Number(item.oneRefundAmount * item.basketCount), 0)
        },
        totalSum() {
            return this.goodsList.reduce((total, item) => total + Number(item.basketCount), 0)
        }
    },
    watch: {},
    created() {
        let list = JSON.parse(this.$route.query.content)
        for (let i = 0; i < list.length; i++) {
            list[i].oneRefundAmount = list[i].refundAmount / list[i].basketCount
            list[i].maxBasketCount = list[i].basketCount
        }
        this.goodsList = list
    },
    destroyed() {},
    mounted() {},
    methods: {
        goback() {
            // TODO 暂时只能做到全局判断
            const priceFlag = this.goodsList.find((item) => {
                return item.oneRefundAmount == '' || item.oneRefundAmount == 0 || item.oneRefundAmount > item.refundAmount
            })
            if (priceFlag) {
                this.$toast('亲!请正确输入退款金额，不能为零或大于最大退款金额')
                return
            }
            const numFlag = this.goodsList.find((item) => {
                return item.basketCount == '' || item.basketCount == 0 || item.basketCount > item.maxBasketCount
            })
            if (numFlag) {
                this.$toast('亲!请正确输入退款数量，不能为零或大于最大退款数量')
                return
            }
            // 修改退款金额 应该等于单个商品修改金额*商品数量
            this.goodsList.forEach((item) => {
                item.refundAmount = item.oneRefundAmount * item.basketCount
            })
            let returnGoodsInfo = {}
            returnGoodsInfo.items = this.goodsList
            returnGoodsInfo.obj = {
                totalPrice: this.totalPrice,
                totalSum: this.totalSum
            }
            sessionStorage.setItem('returnGoodsInfo', JSON.stringify(returnGoodsInfo))
            this.$router.back()
            this.$router.isBack = true
        }
    }
}
</script>
<style scoped>
.box {
    display: flex;
    border-bottom: 1px solid #ebedf0;
    padding: 10px 0;
}
.chidrenBox:last-child {
    margin-bottom: 50px;
}
.pic {
    width: 80px;
    height: 80px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 5px;
    margin-right: 10px;
}
.text {
    width: 100%;
    font-size: 12px;
}
.con {
    display: flex;
    justify-content: space-between;
}
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    /* background: rgb(229, 0, 79);
     */
    background-color: #fd8cb0;
    color: #ffffff;
}
</style>
